<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
#roll_box{
	width: 1000px;
	height: 164px;
    margin: 0 auto;
    margin-top: 200px;
    position: relative;
    border: 1px solid red;
    overflow: hidden;
}
.all{
	width: 5100px;
	height: 164px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.all li{
	float: left;
	list-style: none;
}
.all li img{
	float: left;
}
.click{
	width: 1000px;
	height: 62px;
	margin-top: 51px;
}
.click .left,.click .right{
	width: 28px;
	height: 62px;
	background: #ccc;
	opacity: 0.8;
	float: left;
	font-size: 20px;
	line-height: 62px;
	text-align: center;
	cursor: pointer;
	/*display: none;*/
}
.click .right{
	float: right;
}
</style>
<script type="text/javascript"src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){

    var n = 0; 
    var c = 0;
    // 左边
	$(".click .left").click(function(){
		if(c==1){
			return;
		}
		setTimeout(function(){
			c=0;
		},2000);
		c=1;

		n--;

		if(n==-1){
			$(".all").css({left:"-4000px"})
			n = 3;
		}
		l = n*-1000
        $(".all").animate({left:l+"px"})
	});
	// 右边

	$(".click .right").click(function(){
		if(c==1){
			return;
		}
		setTimeout(function(){
			c=0;
		},2000);
		c=1;
		 n++;
		 if(n==5){
		 	$(".all").css({left:"0px"})
		 	n = 1;
		 }
		 r = n * -1000;
        $(".all").animate({left:r+"px"})

	})






})
</script>	


</head>

<body>
<div id="roll_box">
	<ul class="all">
		<li>
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
		</li>
		<li>
			<img src="images/5.jpg" alt="" />
			<img src="images/6.jpg" alt="" />
			<img src="images/7.jpg" alt="" />
			<img src="images/8.jpg" alt="" />
		</li>
		<li>
			<img src="images/9.jpg" alt="" />
			<img src="images/10.jpg" alt="" />
			<img src="images/11.jpg" alt="" />
			<img src="images/12.jpg" alt="" />
		</li>
		<li>
			<img src="images/13.jpg" alt="" />
			<img src="images/14.jpg" alt="" />
			<img src="images/15.jpg" alt="" />
			<img src="images/16.jpg" alt="" />
		</li>
		<li>
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
		</li>
	</ul>
	<div class="click">
		<div class="left"><</div>
		<div class="right">></div>
	</div>
</div>

</body>
</html>
